<!-- 规划期进度组件 -->
<template>
  <div class="plan-stepper flex-x main-between">
    <div class="plan-stepper-item">
      <span
        class="period"
        :class="{ placeholder: !stepData.steps[0].period }"
        >{{ stepData.steps[0].period || '1' }}</span
      >
      <img
        class="status"
        :src="
          stepData.currentIndex >= 0 ? StepActive : Step
        "
        alt="状态"
      />
      <span class="year">{{ stepData.steps[0].year }}</span>
    </div>
    <span
      class="period"
      :class="{ placeholder: !stepData.steps[1].period }"
      >{{ stepData.steps[1].period || '1' }}</span
    >
    <div class="plan-stepper-item">
      <span
        class="period"
        :class="{ placeholder: !stepData.steps[0].period }"
        >{{ stepData.steps[0].period || '1' }}</span
      >
      <img
        class="status"
        :src="
          stepData.currentIndex >= 1 ? StepActive : Step
        "
        alt="状态"
      />
      <span class="year">{{ stepData.steps[1].year }}</span>
    </div>
    <span
      class="period"
      :class="{ placeholder: !stepData.steps[2].period }"
      >{{ stepData.steps[2].period || '1' }}</span
    >
    <div class="plan-stepper-item">
      <span
        class="period"
        :class="{ placeholder: !stepData.steps[0].period }"
        >{{ stepData.steps[0].period || '1' }}</span
      >
      <img
        class="status"
        :src="
          stepData.currentIndex >= 2 ? StepActive : Step
        "
        alt="状态"
      />
      <span class="year">{{ stepData.steps[2].year }}</span>
    </div>

    <div class="line">
      <div class="progress"></div>
    </div>
  </div>
</template>

<script>
import Step from '@/assets/img/step.png'
import StepActive from '@/assets/img/step-active.png'

export default {
  name: 'PlanStepper',
  props: {
    stepData: {
      type: Object,
      default: () => ({
        currentIndex: 1,
        steps: [
          {
            period: '',
            year: '2021年'
          },
          {
            period: '近期',
            year: '2025年'
          },
          {
            period: '远期',
            year: '2035年'
          }
        ]
      })
    }
  },
  data() {
    return {
      Step,
      StepActive
    }
  },
  mounted() {
    let progressWidth = ''
    if (this.stepData.currentIndex === 0) {
      progressWidth = '0'
    } else if (this.stepData.currentIndex === 1) {
      progressWidth = '50%'
    } else if (this.stepData.currentIndex === 2) {
      progressWidth = '100%'
    }
    document.getElementsByClassName(
      'progress'
    )[0].style.width = progressWidth
  }
}
</script>

<style lang="scss" scoped>
.plan-stepper {
  position: relative;
  .period {
    font-size: 14px;
    font-weight: 400;
    color: #d2e6f0;
    line-height: 14px;

    &.placeholder {
      color: transparent;
    }
  }
  &-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    .period {
      font-size: 14px;
      font-weight: 400;
      color: #d2e6f0;
      line-height: 14px;

      &.placeholder {
        color: transparent;
      }
    }

    .status {
      margin: 5px 0;
    }

    .year {
      font-size: 14px;
      font-weight: bold;
      color: white;
      line-height: 14px;
    }
  }

  .line {
    position: absolute;
    top: 25px;
    left: 20px;
    right: 20px;
    width: calc(100% - 20px - 20px);
    height: 1px;
    background-color: rgba(7, 13, 35, 0.5);

    .progress {
      height: 1px;
      background: linear-gradient(90deg, #00377a, #00ffff);
    }
  }
}
</style>
